<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<title>Bootstrap 3</title>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand"><strong>nonghao</strong>.net</a>
			</div>
			<div class="collapse navbar-collapse" id="responsive-navbar">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">课程</a></li>
					<li><a href="#">博客</a></li>
					<li><a href="#">手册</a></li>
				</ul>
				<form action="" class="navbar-form navbar-left">
					<input type="text" placeholder="搜索" class="form-control">
					<button type="submit" class="btn btn-default ">
						<span class="glyphicon glyphicon-search"></span>
					</button>
				</form>
				<a class="btn btn-primary btn-sm navbar-btn navbar-right">订阅课程</a>
				<div class="profile navbar-right">
					<ul class="nav navbar-nav navbar-right hidden-sm">
						<li><a data-toggle="modal" data-target="#login-modal">登陆</a></li>
						<li><a>注册</a></li>
					</ul>
					<p class="navbar-text navbar-right">
						您好，<a href="#" class="navbar-link">Gavin</a>
					</p>
				</div>
			</div>
		</div>
	</nav>
	<div class="modal fade" id="login-modal" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button class="close" data-dismiss="modal">&times;</button>
					<h4>用户登录</h4>
				</div>
				<div class="modal-body">
					<form action="" role="form">
						<div class="form-group">
							<label for="email">Email</label>
							<input type="email" class="form-control" id="email" placeholder="输入 Email">
						</div>
						<div class="form-group">
							<label for="password">密码</label>
							<input type="password" class="form-control" id="password" placeholder="输入 密码">
						</div>
					</form>
				</div>
				<div class="modal-footer">
					<button class="btn btn-primary">登录</button>
				</div>
			</div>
		</div>
	</div>
	<div class="carousel slide" id="slideshow" data-interval="1000" data-pause="false">
		<ol class="carousel-indicators">
			<li data-target="#slideshow" data-slide-to="0" class="active"></li>
			<li data-target="#slideshow" data-slide-to="1"></li>
			<li data-target="#slideshow" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="item active">
				<img alt="" src="images/01.jpg" style="height: 500px;">
				<div class="carousel-caption">
					<h2>Bootstrap</h2>
					<p>Chenlh chenlh Chenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlh</p>
				</div>
			</div>
			<div class="item">
				<img alt="" src="images/02.jpg" style="height: 500px;">
				<div class="carousel-caption">
					<h2>Javascript</h2>
					<p>Chenlh chenlh Chenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlh</p>
				</div>
			</div>
			<div class="item">
				<img alt="" src="images/03.jpg" style="height: 500px;">
				<div class="carousel-caption">
					<h2>Java</h2>
					<p>Chenlh chenlh Chenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlhChenlh chenlh</p>
				</div>
			</div>
		</div>
		<a href="#slideshow" data-slide="prev" class="left carousel-control"> <span class="glyphicon glyphicon-chevron-left"></span>
		</a> <a href="#slideshow" data-slide="next" class="right carousel-control"> <span class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>
	<div class="text-center" style="padding: 20px;">
		<div class="btn-group">
			<button class="btn btn-default prev-slide">
				<span class="glyphicon glyphicon-backward"></span>
			</button>
			<button class="btn btn-default play-and-stop">
				<span class="glyphicon glyphicon-play"></span>
			</button>
			<button class="btn btn-default next-slide">
				<span class="glyphicon glyphicon-forward"></span>
			</button>
		</div>
	</div>
	<script type="text/javascript" src="lib/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript">
		$(function() {
	        $('#login-modal').on('show.bs.modal', function() {
		        console.log("显示对话框");
	        });

	        $('#login-modal').on('shown.bs.modal', function() {
		        console.log("对话框已经显示了");
	        });

	        $('#login-modal').on('hide.bs.modal', function() {
		        console.log("隐藏对话框");
	        });

	        $('#login-modal').on('hidden.bs.modal', function() {
		        console.log("隐藏了对话框");
	        });

	        $('#login-modal').on('hidden.bs.modal', function() {
		        console.log("已经加载了对话框里的内容");
	        });

	        $("#slideshow").on('slide.bs.carousel', function() {
		        console.log("播放幻灯片");

	        });

	        $("#slideshow").on('slid.bs.carousel', function() {
		        console.log("播放完成");
	        });

        });
	</script>
</body>
</html>